<template>
    <div class="product-item__list">
        <div class="product-item" v-for="(item, index) in productArr" :key="index" @click="handleViewProduct(item)">
            <img class="product-img" :src="item.img" alt="">
            <span class="product-name">{{ item.name }}</span>
            <span class="product-servings">{{ item.servings }}</span>
            <!-- <div class="product_rating">
                <el-rate v-model="item.rating" disabled show-score text-color="#ffdf3a" score-template="{value}">
                </el-rate>
            </div> -->
            <span class="product-description" v-html="item.description"></span>
            <div class="product-btn">
                View Product
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ProductList',
    props: {
        productArr: {
            type: Array,
            required: true
        }
    },
    methods: {
        handleViewProduct(product) {
            this.$router.push({ name: "products", query: { productId: product ? product.id : "" } });
        },
    }
}
</script>


<style scoped lang="less">
@media (max-width: 1200px) {
    .product-item__list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.product-item__list {
    width: 100%;
    max-width: 1600px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    // align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;

    .product-item {
        border: 1px solid #e7e7e7;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 12px;
        // width: 315px;

        .product-img {
            height: 365px;
            object-fit: cover;
            width: 100%;
            padding: 0;
            margin-bottom: 40px;
        }

        .product-name {
            font-size: 22px;
            line-height: 22px;
            font-weight: 800;
            margin-bottom: 40px;
        }

        .product-servings {
            font-size: 18px;
            font-weight: 500;
            text-align: center;
            display: block;
            margin-bottom: 20px;
        }

        .product_rating {
            margin-bottom: 18px;

            ::v-deep .el-rate__icon {
                font-size: 24px !important;
            }
        }

        .product-description {
            font-weight: 500;
            font-size: 15px;
            text-align: center;
            line-height: 1;
            width: 300px;
            max-width: 100%;
            margin: auto;
        }

        .product-btn {
            max-width: 256px;
            padding: 18px 10px;
            width: 100%;
            font-size: 18px;
            background-color: #d2e38f;
            color: #27463a;
            border: 1px solid #d2e38f;
            transition: all 0.2s ease-in-out;
            margin-top: 30px;
            border-radius: 30px;
            text-align: center;
            font-weight: 500;
            cursor: pointer;
        }

        .product-btn:hover {
            background-color: #f7f8f9;
            border: 1px solid #d8d8d8;
            transition: all 0.2s ease-in-out;
        }
    }
}
</style>
